<template>
  <div class="personal_purse">
    <my-header :showBack="true" :title="$t('lang.TradingRecord')"></my-header>
    <div>
			<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
				<van-collapse v-model="activeNames">
				<van-collapse-item  
					v-for="(i,index) in Arr" 
					:key="index"> 
					<div slot="title" class="jytime">
						<h3>{{$t("lang.TransactionID")}}:{{ i.tradeSerial }}</h3>
						<!-- <div class="">
							<p>{{$t("lang.Time")}}：{{ i.createTime }}</p>
						</div> -->
					</div>
					<div class="trad_list nborder">
						<div class="nflex">
							<p>{{$t("lang.tradtype")}}</p>
							<p class="nflex_font" v-if = "i.tradeStatus ==5">订单已完成</p>
							<p class="nflex_font" v-else-if = "i.tradeStatus ==2">{{$t("lang.unpaid")}}</p>
							<p class="nflex_font" v-else-if = "i.tradeStatus ==3">{{$t("lang.confirmeding")}}</p>
							<p class="nflex_font" v-else-if = "i.tradeStatus ==1">{{$t("lang.Fortrading")}}</p>
						</div>
						<div class="nflex">
							<p>{{$t("lang.TheynumberedID")}}</p><p>{{ i.tradeSerial }}</p>
						</div>
						<div class="mjinfo">
							<h4>{{$t("lang.Buyersinformation")}}</h4>
							<div class="nflex ">
									<p>{{$t("lang.userNo")}}</p>
									<p>{{ i.buyBankCard }}</p>
							</div>
							<div class="nflex">
									<p>{{$t("lang.RealName")}}</p>
									<p>{{ i.buyCustomerName }}</p>
							</div>
							<div class="nflex">
									<p>{{$t("lang.Phonenumber")}}</p>
									<p>{{ i.buyCustomerPhone }}</p>
							</div>			
						</div>
						<div class="mjinfo">
							<h4>{{$t("lang.sellerinfo")}}</h4>
							<div class="nflex ">
									<p>{{$t("lang.userNo")}}</p>
									<p>{{ i.saleBankCard }}</p>
							</div>
							<div class="nflex">
									<p>{{$t("lang.RealName")}}</p>
									<p>{{ i.saleCustomerName }}</p>
							</div>
							<div class="nflex">
									<p>{{$t("lang.Phonenumber")}}</p>
									<p>{{ i.saleCustomerPhone }}</p>
							</div>			
						</div>
						<aside 
							v-if="i.tradeStatus == 5"
						@click = "tradingPage(i)">
							点击查看详情
						</aside>
						<aside 
							v-if="i.tradeStatus !== 5"
						@click = "goMyTrading(index)">
							订单未完成，点击查看详情
						</aside>
					</div>
				</van-collapse-item>
				<van-popup v-model="show" position="top" :overlay="true" :close-on-click-overlay ="false" class ="shade">
					<div class = "popup">
						<!-- 显示交易图片 -->
						<section>
							<img :src="Obj.tradeImg" alt="">
						</section>
						<article @click = "tradingPage">
							关闭图片
						</article>
					</div>
				</van-popup>
			</van-collapse>	
			</van-pull-refresh>
    </div>
  </div>
</template>

<script>
import header from "@/components/header";
import { Toast } from 'vant';
import ClipboardJS from 'Clipboard'

export default {
	name:"tradingRecord",
  components: {
    "my-header": header
  }, 
  data(){
    return{
			userInfo:{},
			tradingList:[{id:"ADSD123456",type:1,idT:12445,jyType:"担保交易",gdsl:800,sjsl:"658",atPrice:"1.18",name:"莉莉",dbrID:"fdfda"},
				{id:"ADSD123456",type:0,idT:12445,jyType:"担保交易",gdsl:800,sjsl:"658",atPrice:"1.18",name:"莉莉",dbrID:"fdfda"},
				{id:"ADSD123456",type:1,idT:12445,jyType:"担保交易",gdsl:800,sjsl:"658",atPrice:"1.18",name:"莉莉",dbrID:"fdfda"},
			],
			activeName: '1',
			activeNames: ['0'],
			jyListData:[1,2,3,],
			// 用来存放交易信息
			Arr:[],
			show:false,
			// 存放弹窗
			Obj:{},
			// overlay:false,
			// 用来存放账户登录者的编号
			num:"",
			isLoading: false,
    }
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return timeFormat.formatDate(date, "yyyy.MM.dd hh:mm");
    }
  },
  mounted(){
		this.userInfo = JSON.parse(localStorage.getItem('userInfo.bankCard'))
		this.TradingRecord();
  },
  methods:{
    promote() {
      if (this.userInfo.customerPurse != "") {
        const clipboard = new ClipboardJS('.copy_customer_purse');
        clipboard.on('success', function(e) {
            e.clearSelection();
            Toast({
              message: "复制地址成功",
              position: "bottom"
            });
        });
        clipboard.on('error', function(e) {
          Toast({
              message: "复制地址失败，请选择复制",
              position: "bottom"
            });
        });
      }
		},
		onRefresh() {
      setTimeout(() => {
        this.$toast('刷新成功');
        this.isLoading = false;
        // this.count++;	this.TradingRecord();
				// console.log(localStorage.getItem(userinfo))
				this.TradingRecord();
				let obj = JSON.parse(localStorage.getItem('userInfo'));
				// console.log(JSON.parse(localStorage.getItem('userInfo.bankCard')))
				// console.log(obj.bankCard)
				this.num = obj.bankCard
				// console.log(this.num);
      }, 500);
    },
		TradingRecord(){
			this.$ajax(this.$api.selectTradingRecord,{type:0}).then(res => {
				if (res.code == 0) {
					console.log(res.msg)
					if(res.msg.length > 0){
						this.Arr = res.msg;
						// if(this.Arr)
						console.log(this.Arr,1111111111111111)
					}else{
						this.Arr = true;
						// console.log(this.Arr,11111111111111111111)
					}
				}
			});
		},
		// 查看交易进度
		goMyTrading(val){
			this.$router.push({name: 'TradingDetail', params: {id:val}})
			console.log(val)
		},
		// 请求弹出框 获取交易的详情信息
		tradingPage(val){
			this.show =!this.show;
			console.log(this.show)
			// console.log(1)
			// console.log(val,11111111111111);
			this.Obj = val;
		}
	},
	// 请求交易记录
	created(){
		this.TradingRecord();
		// console.log(localStorage.getItem(userinfo))
		let obj = JSON.parse(localStorage.getItem('userInfo'));
		console.log(JSON.parse(localStorage.getItem('userInfo.bankCard')))
		console.log(obj.bankCard)
		this.num = obj.bankCard
		console.log(this.num);
	}
}
</script>

<style lang='less' scoped>

.trad_list{
	.nflex{
		.nflex_font{
			color:red!important;
		}
	}
	background: #f6f6f6;
		box-sizing: border-box;padding:10px 12px;background:#ffffff;margin-top:10px;
		h4{color: #333333;line-height: 26px;}
		.nflex{display: flex;justify-content:space-between ;
			p{line-height: 20px;color: #999999;}
			span{color: #666666;}
			p:nth-child(2){color: #333333}
			.npadd{padding: 15px 0;}
		}
		.buybtn{color: #FF4954;border: 1px solid #FF4954;border-radius: 20px;padding: 0 6px ;}	
		.tiphui{color: #999999;}
		.tipred{color: #FF5458;}
		
}
.jytime{
	h3{color: #333333;font-size: 14px;}
	p{color: #CCCCCC;}
	}
	
aside{
	height:35px;
	margin-top:10px;
	width:100%;
	// background:yellow;
	border:1px solid #999;
	background:#fff;
	color: #969696;
	font-size:14px;
	line-height:35px;
	text-align: center;
	border-radius:20px;
}
.shade{
	width:80%;
	position:fixed;
	top:5%;
	margin-left:auto;
	margin-right:auto;
}
.popup{
	height:500px;
	width:100%;
	background:#eee;
	section{
		width:100%;

		top:0;
		left:0;
		right:0;
		bottom:0;
		height:450px;
		// background:red;
		img{
			height:100%;
			width:100%;
		}
	}
	article{
		margin-top:10px;
		height:30px;
		margin-bottom:10px;
		margin-left:5px;
		margin-right:5px;
		font-size:14px;
		background:#fff;
		line-height:30px;
		text-align: center;
		border:1px solid #999;
		border-radius:10px;
	}
}
</style>
